<template>
  <div>
    <Header>
      <span slot="center">购物车</span>
    </Header>
    <NoticeBar></NoticeBar>
    <van-empty description="您还未登录~" image="error" v-if="!LoginState" image-size="250" />
    <div class="goods_bar">
      <span class="unselected" :class="{ 'selected': allSelected }" @click="allSelect">
        <van-icon name="success" :color="allSelected ? '#fff' : '#666'" />
      </span>
      <span class="title">商品</span>
    </div>
    <CartList v-if="LoginState"></CartList>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import NoticeBar from '@/components/common/NoticeBar.vue'
import CartList from '@/components/content/cart/CartList.vue'
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  name: "cart",
  components: {
    Header,
    NoticeBar,
    CartList
  },
  data() {
    return {
    }
  },
  methods: {
    ...mapMutations('cart', ['ALL_SELECT']),
    // 全选按钮
    allSelect() {
      this.ALL_SELECT(this.allSelected)
    }
  },
  computed: {
    ...mapState('user', ['userId', 'LoginState']),
    ...mapState('cart', ['allSelected']),
    ...mapGetters('cart', ['allSelected'])
  },
  created() {
    if (this.$store.state.user.LoginState) {
      this.$store.dispatch('cart/REQUEST_CART_DATA')
    }
  },
}
</script>

<style lang='less' scoped>
.van-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.unselected {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  margin-left: 15px;
  border-radius: 50%;
  border: 1px solid #666;
}

.selected {
  background-color: #b0352f;
}

.goods_bar {
  display: flex;
  height: 60px;
  align-items: center;
  border-bottom: 1px solid #eee;

  .title {
    margin-left: 15px;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>